<!-- 会话窗口公用代码 -->
<template>
    <div>
        <template v-if="!isEmpty(kefu.state.sessionInfo)">
            <!-- 聊天记录加载态，不放在 TransitionGroup 以内，因为加载可能比过渡动画更快，loading 就无法显示了 -->
            <div v-show="kefu.state.sessionRecords.loading" class="messages-loading">
                <Icon name="el-icon-Loading" class="is-loading" />
            </div>

            <!-- 聊天记录 -->
            <TransitionGroup
                @scroll="transitionGroupScroll($event)"
                class="chat-records ba-scroll-style"
                name="el-fade-in-linear"
                tag="div"
                :ref="kefu.common.messageScrollbarRef"
            >
                <div class="chat-records-grow" key="chatRecordsGrow"></div>
                <template v-for="(item, idx) in kefu.state.sessionRecords.data" :key="idx">
                    <div
                        v-for="(message, index) in item.data"
                        :key="message.id ? message.id : message.content"
                        class="chat-record-item"
                        :class="getRecordItemClass(message)"
                    >
                        <span v-if="message.type == 'system'">{{ message.content }}</span>
                        <template v-else>
                            <div class="record-avatar-img">
                                <img draggable="false" :src="getRecordUserInfo(message.sender_id, 'avatar')" />
                            </div>
                            <div class="record-content-box">
                                <div class="chat-record-nickname">{{ getRecordUserInfo(message.sender_id, 'nickname') }}</div>
                                <div class="record-content">
                                    <template v-if="message.type == 'text'">
                                        <div class="text-content">
                                            <MdPreview
                                                class="message-md-content"
                                                :id="'content-' + index"
                                                :editorId="'content-' + index"
                                                :modelValue="message.content"
                                            />
                                        </div>
                                    </template>
                                    <el-image
                                        :hide-on-click-modal="true"
                                        v-else-if="message.type == 'image'"
                                        :preview-src-list="[fullUrl(message.content)]"
                                        :src="fullUrl(message.content)"
                                        class="record-img"
                                    ></el-image>
                                    <div v-else-if="message.type == 'file'" class="record-file">
                                        <div class="file-suffix">
                                            <img :src="buildSuffixSvgUrl(message.extend.suffix)" alt="" />
                                        </div>
                                        <div class="file-name-box">
                                            <div class="file-name">{{ message.extend.name }}</div>
                                            <div class="file-size">{{ getFileSize(message.extend.size) }}</div>
                                        </div>
                                        <el-button size="small" @click="downloadFile(message.content, message.extend.name)" class="file-download"
                                            >下载</el-button
                                        >
                                    </div>
                                    <el-link target="_blank" type="success" v-else-if="message.type == 'link'" :href="message.content">
                                        {{ message.title ?? message.content }}
                                    </el-link>
                                    <div v-else-if="message.type == 'good'" class="record-card toolbar-data-item">
                                        <img class="data-item-logo" :src="message.extend.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ message.extend.title }}</div>
                                            <div class="data-item-subtitle">{{ message.extend.subtitle }}</div>
                                            <div class="data-item-price">{{ message.extend.price }}</div>
                                        </div>
                                    </div>
                                    <div v-else-if="message.type == 'order'" class="record-card toolbar-data-item">
                                        <img class="data-item-logo" :src="message.extend.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ message.extend.title }}</div>
                                            <div class="data-item-subtitle">{{ message.extend.subtitle }}</div>
                                            <div class="data-item-price">
                                                {{ message.extend.amount }} <span class="number">x{{ message.extend.number }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="message.sender_id == kefu.state.userInfo.id && message.status == 'read'" class="read-status">已读</div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- 日期 -->
                    <div class="chat-record-item system">
                        <span>{{ item.datetime }}</span>
                    </div>
                </template>
            </TransitionGroup>
            <div class="message-textarea-box">
                <div v-if="kefu.state.sessionUserInputStatus" class="message-input-status">对方正在输入...</div>
                <div class="toolbar">
                    <el-popover v-model:visible="state.toolVisible.emoji" placement="top-start" :teleported="false" :width="346" trigger="hover">
                        <ol class="emojis">
                            <li v-for="(emoji, index) of emojis" :key="`emoji-${index}`" @click="onEmojiHandler(emoji)" v-text="emoji"></li>
                        </ol>
                        <template #reference>
                            <div class="toolbar-item" :class="state.toolVisible.emoji ? 'active' : ''">
                                <i title="发送表情" class="toolbar-icon smiley"></i>
                            </div>
                        </template>
                    </el-popover>

                    <div class="toolbar-item select-file">
                        <input
                            @change="onFileUpload('image', $event, imageRef!)"
                            title="发送图片"
                            size="1"
                            width="24"
                            type="file"
                            name="image"
                            accept="image/*"
                            ref="imageRef"
                        />
                        <i class="toolbar-icon image"></i>
                    </div>
                    <div class="toolbar-item select-file">
                        <input
                            @change="onFileUpload('file', $event, fileRef!)"
                            title="发送文件"
                            size="1"
                            width="24"
                            type="file"
                            name="file"
                            ref="fileRef"
                        />
                        <i class="toolbar-icon file"></i>
                    </div>
                    <el-popover
                        v-model:visible="state.toolVisible.goods"
                        placement="top-start"
                        :teleported="false"
                        :width="340"
                        trigger="click"
                        :popper-style="{
                            padding: '0',
                        }"
                        :hide-after="0"
                        v-if="kefu.config?.goods_api && kefu.config?.send_goods_identity.includes(kefu.state.userInfo.identity)"
                    >
                        <div class="toolbar-data-box">
                            <div class="ba-center toolbar-loading-box" v-if="state.commonLoading">
                                <Icon name="el-icon-Loading" class="is-loading" />
                            </div>
                            <div class="toolbar-data-list ba-scroll-style" v-else>
                                <template v-if="state.goods.length">
                                    <div class="toolbar-data-item" v-for="(item, idx) in state.goods" :key="idx" @click="onSendGood(item)">
                                        <img class="data-item-logo" :src="item.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ item.title }}</div>
                                            <div class="data-item-subtitle">{{ item.subtitle }}</div>
                                            <div class="data-item-price">{{ item.price }}</div>
                                        </div>
                                        <input class="data-item-radio" name="goods" type="radio" :value="item.id" />
                                    </div>
                                </template>
                                <el-empty v-else :image-size="40" description="暂无数据..." />
                            </div>
                        </div>
                        <template #reference>
                            <div class="toolbar-item" :class="state.toolVisible.goods ? 'active' : ''" @click="onShowGoods">
                                <i title="发送商品" class="toolbar-icon goods"></i>
                            </div>
                        </template>
                    </el-popover>
                    <el-popover
                        v-model:visible="state.toolVisible.orders"
                        placement="top-start"
                        :teleported="false"
                        :width="340"
                        trigger="click"
                        :popper-style="{
                            padding: '0',
                        }"
                        :hide-after="0"
                        v-if="kefu.config?.orders_api && kefu.config?.send_orders_identity.includes(kefu.state.userInfo.identity)"
                    >
                        <div class="toolbar-data-box">
                            <div class="ba-center toolbar-loading-box" v-if="state.commonLoading">
                                <Icon name="el-icon-Loading" class="is-loading" />
                            </div>
                            <div class="toolbar-data-list ba-scroll-style" v-else>
                                <template v-if="state.orders.length">
                                    <div class="toolbar-data-item" v-for="(item, idx) in state.orders" :key="idx" @click="onSendOrder(item)">
                                        <img class="data-item-logo" :src="item.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ item.title }}</div>
                                            <div class="data-item-subtitle">{{ item.subtitle }}</div>
                                            <div class="data-item-price">
                                                {{ item.amount }} <span class="number">x{{ item.number }}</span>
                                            </div>
                                        </div>
                                        <input class="data-item-radio" name="order" type="radio" :value="item.id" />
                                    </div>
                                </template>
                                <el-empty v-else :image-size="40" description="暂无数据..." />
                            </div>
                        </div>
                        <template #reference>
                            <div class="toolbar-item" :class="state.toolVisible.orders ? 'active' : ''" @click="onShowOrders">
                                <i title="发送订单" class="toolbar-icon order"></i>
                            </div>
                        </template>
                    </el-popover>
                    <div v-if="kefu.state.userInfo.identity == 'csr'" class="toolbar-right">
                        <el-popover
                            placement="top"
                            :width="250"
                            trigger="hover"
                            :popper-style="{
                                padding: 0,
                            }"
                        >
                            <template #default>
                                <div class="quick-reply-list ba-scroll-style">
                                    <div
                                        v-for="(item, idx) in kefu.state.quickReply"
                                        @click="onQuickReply(item.content)"
                                        :key="idx"
                                        class="quick-reply-item"
                                    >
                                        {{ item.content }}
                                    </div>
                                </div>
                            </template>
                            <template #reference>
                                <div class="quick-reply">快捷回复</div>
                            </template>
                        </el-popover>
                    </div>
                </div>
                <textarea
                    @input="onMessageInput($event)"
                    @blur="onMessageBlur()"
                    class="ba-scroll-style"
                    id="message-text-input"
                    rows="3"
                    @keyup.alt.enter="onSendMessage"
                    @keyup.ctrl.enter="onSendMessage"
                    v-model="kefu.state.messageInputValue"
                    :ref="kefu.common.messageInputRef"
                ></textarea>
                <div class="message-textarea-footer">
                    <span>按下Enter换行，Ctrl或Alt+Enter发送</span>
                    <el-button
                        :loading="kefu.state.sendMessageLoading"
                        :disabled="kefu.state.sendMessageLoading"
                        type="primary"
                        @click="onSendMessage"
                        size="small"
                        >发送</el-button
                    >
                </div>
            </div>
        </template>
        <div v-else class="unselected-session"></div>
    </div>
</template>

<script setup lang="ts">
import { isEmpty, debounce } from 'lodash-es'
import { nextTick, reactive, ref } from 'vue'
import { fullUrl } from '/@/utils/common'
import { MdPreview } from 'md-editor-v3'
import { emojis } from '/@/components/kefu/store'
import useCurrentInstance from '/@/utils/useCurrentInstance'
import type kefuClass from '/@/components/kefu/index'
import 'md-editor-v3/lib/preview.css'
import { uuid } from '/@/utils/random'
import { buildSuffixSvgUrl } from '/@/api/frontend/kefu/index'
import { goods, orders } from '/@/api/frontend/kefu/index'
import { Local } from '/@/utils/storage'
import { BA_KEFU_TOURIST_TOKEN } from '/@/components/kefu/store'

const fileRef = ref<HTMLInputElement>()
const imageRef = ref<HTMLInputElement>()
const { proxy } = useCurrentInstance()
const kefu = proxy.kefu as kefuClass

const state: {
    recordsHeight: string
    toolVisible: {
        emoji: boolean
        goods: boolean
        orders: boolean
    }
    commonLoading: boolean
    messageInputState: string
    goods: anyObj[]
    orders: anyObj[]
} = reactive({
    recordsHeight: 'calc(100% - 139px)',
    toolVisible: {
        emoji: false,
        goods: false,
        orders: false,
    },
    commonLoading: false,
    messageInputState: 'blur',
    goods: [],
    orders: [],
})

/**
 * 聊天记录项的 class
 */
const getRecordItemClass = (message: anyObj) => {
    if (message.type == 'system') {
        return 'system'
    }
    return message.sender_id == kefu.state.userInfo.id ? 'me' : 'you'
}

/**
 * 聊天记录用户信息
 */
const getRecordUserInfo = (id: number, key: string) => {
    let value = kefu.state.sessionRecords.users[id] ? kefu.state.sessionRecords.users[id][key] : ''
    if (key == 'avatar' && value) {
        value = fullUrl(value)
    }
    return value
}

const onMessageInput = debounce((el: Event) => {
    const elem = el.target as HTMLInputElement
    elem.style.height = 'auto'
    const height = elem.scrollHeight > 200 ? 200 : elem.scrollHeight
    state.recordsHeight = 'calc(100% - ' + (height + 75) + 'px)'
    elem.style.height = height + 'px'
    elem.scrollTop = height

    if (state.messageInputState == 'blur') {
        kefu.sendMessageInputState('input')
        state.messageInputState = 'input'
    }
}, 300)

const onMessageBlur = debounce(() => {
    if (state.messageInputState == 'input') {
        kefu.sendMessageInputState('blur')
        state.messageInputState = 'blur'
    }
}, 300)

const onEmojiHandler = (emoji: string) => {
    // 将 emoji 插入到 messageInput.value 的光标位置
    const start = kefu.common.messageInputRef.value!.selectionStart
    const end = kefu.common.messageInputRef.value!.selectionEnd
    kefu.state.messageInputValue = kefu.state.messageInputValue.substring(0, start) + emoji + kefu.state.messageInputValue.substring(end)

    nextTick(() => {
        kefu.common.messageInputRef.value!.focus()
        kefu.common.messageInputRef.value!.setSelectionRange(start + emoji.length, start + emoji.length)
        state.toolVisible.emoji = false
    })
}

const onSendMessage = () => {
    if (kefu.state.sendMessageLoading || !kefu.state.messageInputValue) return

    kefu.sendSessionMessage('text', kefu.state.messageInputValue)
    kefu.state.messageInputValue = ''
    kefu.messageInputFocus()

    if (state.messageInputState == 'input') {
        kefu.sendMessageInputState('blur')
        state.messageInputState = 'blur'
    }
}

/**
 * 聊天记录框滚动条滚动
 */
const transitionGroupScroll = debounce((e: Event) => {
    const target = e.target as HTMLDivElement
    const scrollTop = Math.abs(target.scrollTop)
    const scrollHeight = target.scrollHeight
    const clientHeight = target.clientHeight

    if (scrollTop + clientHeight + 10 >= scrollHeight) {
        kefu.state.sessionRecords.page++
        kefu.loadSessionRecords()
    }
}, 300)

const onQuickReply = (content: string) => {
    kefu.state.messageInputValue += content
    kefu.messageInputFocus()
}

const onFileUpload = (type: string, e: Event, inputRef: HTMLInputElement) => {
    const files = (e.target as HTMLInputElement).files
    if (!files) return

    let fd = new FormData()
    fd.append('file', files[0])
    inputRef.value = ''

    kefu.fileUpload(fd, { uuid: uuid() }).then((res) => {
        kefu.sendSessionMessage(type, res.data.file.url, {
            size: res.data.file.size,
            name: res.data.file.name,
            suffix: res.data.file.suffix,
        })
    })
}

const onShowGoods = () => {
    if (!kefu.config?.goods_api || state.toolVisible.goods) return

    state.commonLoading = true

    goods(kefu.config.goods_api, {
        ba_token: kefu.stores.adminInfo.getToken(),
        ba_user_token: kefu.stores.userInfo.getToken(),
        ba_tourist_token: Local.get(BA_KEFU_TOURIST_TOKEN),
    })
        .then((res) => {
            state.goods = res.data
        })
        .finally(() => {
            state.commonLoading = false
        })
}

const onSendGood = (good: anyObj) => {
    state.toolVisible.goods = false
    kefu.sendSessionMessage('good', good.title, good)
}

const onSendOrder = (order: anyObj) => {
    state.toolVisible.orders = false
    kefu.sendSessionMessage('order', order.title, order)
}

const onShowOrders = () => {
    if (!kefu.config?.orders_api) return

    state.commonLoading = true

    orders(kefu.config.orders_api, {
        ba_token: kefu.stores.adminInfo.getToken(),
        ba_user_token: kefu.stores.userInfo.getToken(),
        ba_tourist_token: Local.get(BA_KEFU_TOURIST_TOKEN),
    })
        .then((res) => {
            state.orders = res.data
        })
        .finally(() => {
            state.commonLoading = false
        })
}

const getFileSize = (byte: string) => {
    const size = parseFloat(byte)
    const i = Math.floor(Math.log(size) / Math.log(1024))
    return (size / Math.pow(1024, i)).toFixed(i < 1 ? 0 : 2) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i]
}

const downloadFile = (url: string, name: string) => {
    const a = document.createElement('a')
    a.href = url
    a.download = name
    a.click()
}
</script>

<style scoped lang="scss">
.toolbar-data-box {
    .toolbar-loading-box {
        height: 50px;
    }
    .toolbar-data-list {
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
        .toolbar-data-item:hover {
            background-color: var(--el-color-info-light-9);
        }
    }
}
.toolbar-data-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    .data-item-logo {
        width: 80px;
        object-fit: cover;
    }
    .data-item-info {
        display: block;
        padding: 0 10px;
        width: calc(100% - 93px);
        .data-item-title {
            height: 32px;
            font-size: 14px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            line-height: 16px;
            font-weight: bold;
        }
        .data-item-subtitle {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 2px;
        }
        .data-item-price {
            margin-left: -3px;
            font-size: 18px;
            color: rgba(231, 76, 60, 1);
            .number {
                color: #999999;
                font-size: 14px;
            }
        }
    }
    .data-item-radio {
        width: 13px;
    }
}
.unselected-session {
    height: 100%;
    background: url(/@/assets/kefu/bg.png) no-repeat center;
    background-size: 300px 171px;
}
.message-md-content {
    background: transparent;
    :deep(.default-theme p) {
        padding: 0;
        line-height: 1.3;
    }
    :deep(.md-editor-preview) {
        font-size: 15px;
    }
    :deep(.md-editor-preview-wrapper) {
        padding: 0;
        overflow: hidden;
    }
    :deep(.default-theme ul li) {
        margin: 0;
    }
    :deep(a) {
        color: var(--el-color-primary);
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}
.me {
    .message-md-content {
        :deep(.default-theme) {
            --md-theme-color: var(--el-color-white);
            --md-theme-code-inline-color: var(--el-color-black);
            --md-theme-bg-color-inset: #fff;
            blockquote {
                color: #000;
            }
            a {
                color: var(--el-color-warning);
            }
        }
    }
}
.messages-loading {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    top: 4px;
}
.chat-records {
    display: flex;
    flex-direction: column-reverse;
    height: v-bind('state.recordsHeight');
    padding: 0 5px 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    .chat-records-grow {
        flex-grow: 1;
        flex-shrink: 1;
    }
    .chat-record-item {
        display: flex;
        padding-top: 16px;
        align-items: flex-start;
    }
    .system span {
        font-size: 12px;
        display: inline-block;
        background: var(--el-color-info-light-8);
        color: var(--el-text-color-primary);
        line-height: 12px;
        border-radius: 5px;
        padding: 5px 10px 3px 10px;
        text-align: center;
        word-wrap: break-word;
        word-break: break-all;
        margin: 0 auto;
    }
    .record-avatar-img {
        position: relative;
        display: inline-block;
        background: transparent;
        width: 36px;
        height: 36px;
        cursor: pointer;
        user-select: none;
        img {
            height: 100%;
            width: 100%;
            border-radius: 6px;
        }
    }
    .record-content-box {
        position: relative;
        max-width: 75%;
        margin: 0 13px;
    }
    .me {
        flex-direction: row-reverse;
        display: flex;
        justify-content: flex-start;
        align-content: center;
    }
    .chat-record-nickname {
        color: var(--el-text-color-secondary);
        padding-bottom: 3px;
    }
    .you .chat-record-nickname {
        text-align: left;
    }
    .you .record-content {
        color: #000;
        background: var(--el-color-info-light-9);
        .el-link {
            --el-link-text-color: var(--el-color-success);
        }
    }
    .me .chat-record-nickname {
        text-align: right;
    }
    .me .record-content {
        margin-left: auto;
        color: var(--el-color-white);
        background: var(--el-color-primary);
        .el-link {
            --el-link-text-color: var(--el-color-warning);
            &:hover {
                --el-link-hover-text-color: var(--el-color-warning);
            }
        }
    }
    .you .record-content-box:before {
        left: -4px;
        background: var(--el-color-info-light-9);
    }
    .me .record-content-box:before {
        right: -4px;
        background: var(--el-color-primary);
    }
    .me .data-item-price {
        .number {
            color: #fff;
        }
    }
    .record-content-box:before {
        position: absolute;
        top: 26px;
        display: block;
        width: 8px;
        height: 6px;
        content: '\00a0';
        -webkit-transform: rotate(29deg) skew(-35deg);
        transform: rotate(29deg) skew(-35deg);
    }
    .record-content {
        font-size: 14px;
        color: var(--el-text-color-primary);
        padding: 12px 10px;
        border-radius: 5px;
        position: relative;
        width: fit-content;
        word-wrap: break-word;
        word-break: break-all;
        .record-img,
        .el-image {
            vertical-align: bottom;
            max-width: 200px;
            max-height: 200px;
            width: auto;
            height: auto;
            cursor: pointer;
            user-select: none;
            border: 1px solid transparent;
        }
        .record-file {
            display: flex;
            align-items: center;
            .file-suffix {
                img {
                    width: 40px;
                }
            }
            .file-name-box {
                padding: 0 10px;
                .file-name {
                    font-weight: bold;
                }
                .file-size {
                    padding-top: 4px;
                }
            }
        }
        .text-content {
            display: flex;
            align-items: center;
        }
        .record-card {
            width: 300px;
        }
    }
    .read-status {
        position: absolute;
        left: 0;
        left: -30px;
        bottom: 0;
        font-size: 12px;
        color: var(--el-color-info);
    }
}
.message-textarea-box {
    position: relative;
    padding-left: 10px;
    border-top: 1px solid var(--el-color-info-light-9);
    .message-input-status {
        position: absolute;
        line-height: 30px;
        top: -30px;
        color: var(--el-color-primary);
        padding-left: 6px;
    }
    .toolbar {
        display: flex;
        align-items: center;
        margin: 6px 0 0 0;
        .toolbar-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin-right: 10px;
            vertical-align: middle;
            cursor: pointer;
            .toolbar-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                vertical-align: middle;
            }
            &:hover {
                background-color: #ebebeb;
            }
            .smiley {
                background: url('/@/assets/kefu/smiley.png') no-repeat center;
                background-size: 80% 80%;
            }
            .image {
                background: url('/@/assets/kefu/image.png') no-repeat center;
                background-size: 80% 80%;
            }
            .file {
                background: url('/@/assets/kefu/attachment.png') no-repeat center;
                background-size: 80% 80%;
            }
            .goods {
                background: url('/@/assets/kefu/goods.png') no-repeat center;
                background-size: 80% 80%;
            }
            .order {
                background: url('/@/assets/kefu/order.png') no-repeat center;
                background-size: 80% 80%;
            }
        }
        .toolbar-item.active {
            background-color: #ebebeb;
        }
        .toolbar-right {
            margin-left: auto;
            padding-right: 5px;
            .quick-reply {
                font-size: 13px;
                color: var(--el-color-info);
                cursor: pointer;
            }
        }
        .select-file {
            position: relative;
            input {
                filter: alpha(opacity=0);
                opacity: 0;
                width: 26px;
                height: 26px;
                display: inline-block;
                position: absolute;
                z-index: 2;
                text-indent: -9999px;
                cursor: pointer;
            }
            .image {
                position: absolute;
                z-index: 1;
            }
        }
    }
    .emojis {
        overflow-y: auto;
        padding-top: 1px;
        padding-left: 1px;
        li {
            display: flex;
            align-items: center;
            justify-content: center;
            float: left;
            height: 30px;
            width: 30px;
            font-size: 16px;
            overflow: hidden;
            margin: -1px 0 0 -1px;
            padding: 2px;
            text-align: center;
            list-style: none;
            z-index: 11;
            user-select: none;
            cursor: pointer;
            &:hover {
                position: relative;
                z-index: 12;
                background-color: #ebebeb;
            }
        }
    }
    textarea {
        width: 100%;
        border: none;
        background-color: transparent;
        padding: 5px 0;
        line-height: 18px;
        font-size: 15px;
    }
    .message-textarea-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: var(--el-font-size-small);
        color: var(--el-text-color-placeholder);
        margin-top: 8px;
        padding-right: 5px;
        span {
            padding: 0 8px;
        }
    }
}
.quick-reply-list {
    display: block;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--el-color-info-light-9);
    .quick-reply-item {
        display: block;
        padding: 10px 0 10px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid var(--el-color-info-light-9);
        cursor: pointer;
        user-select: none;
        &:hover {
            background: var(--el-color-info-light-9);
        }
    }
}
</style>
